import React from 'react';
import { Card } from 'react-bootstrap';
import Ec from './Ec';
import Intro from './Intro';
import jsonData from '../data/kq/class/class920_kq.json';

export default class extends React.Component {
    constructor(props) {
        super(props);
        this.option = null;
    }
    componentWillMount() {
        this.option = {
            color: ['#8cc1aa', '#749aa0', '#df6b66', '#e79d88'],
            legend: {},
            grid: {
                left: 0,
                right: 0,
                top: '10%',
                bottom: 0,
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    axis: 'x',
                    type: 'shadow'
                },
            },
            toolbox: {
                feature: {
                    magicType: {
                        type: ['line', 'bar']
                    }
                }
            },
            xAxis: {
                type: 'category',
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    formatter: (param) => {
                        return param.slice(5) + '\n' + param.slice(0, 4)
                    }
                },
                data: ['2018-09-01', '2018-09-02', '2018-09-03', '2018-09-04', '2018-09-05', '2018-09-06', '2018-09-07', '2018-09-08', '2018-09-09', '2018-09-10', '2018-09-11', '2018-09-12', '2018-09-13', '2018-09-14', '2018-09-15', '2018-09-16', '2018-09-17', '2018-09-18', '2018-09-19', '2018-09-20', '2018-09-21', '2018-09-22', '2018-09-23', '2018-09-24', '2018-09-25', '2018-09-26', '2018-09-27', '2018-09-28', '2018-09-29', '2018-09-30', '2018-10-01', '2018-10-02', '2018-10-03', '2018-10-04', '2018-10-05', '2018-10-06', '2018-10-07', '2018-10-08', '2018-10-09', '2018-10-10', '2018-10-11', '2018-10-12', '2018-10-13', '2018-10-14', '2018-10-15', '2018-10-16', '2018-10-17', '2018-10-18', '2018-10-19', '2018-10-20', '2018-10-21', '2018-10-22', '2018-10-23', '2018-10-24', '2018-10-25', '2018-10-26', '2018-10-27', '2018-10-28', '2018-10-29', '2018-10-30', '2018-10-31', '2018-11-01', '2018-11-02', '2018-11-03', '2018-11-04', '2018-11-05', '2018-11-06', '2018-11-07', '2018-11-08', '2018-11-09', '2018-11-10', '2018-11-11', '2018-11-12', '2018-11-13', '2018-11-14', '2018-11-15', '2018-11-16', '2018-11-17', '2018-11-18', '2018-11-19', '2018-11-20', '2018-11-21', '2018-11-22', '2018-11-23', '2018-11-24', '2018-11-25', '2018-11-26', '2018-11-27', '2018-11-28', '2018-11-29', '2018-11-30', '2018-12-01', '2018-12-02', '2018-12-03', '2018-12-04', '2018-12-05', '2018-12-06', '2018-12-07', '2018-12-08', '2018-12-09', '2018-12-10', '2018-12-11', '2018-12-12', '2018-12-13', '2018-12-14', '2018-12-15', '2018-12-16', '2018-12-17', '2018-12-18', '2018-12-19', '2018-12-20', '2018-12-21', '2018-12-22', '2018-12-23', '2018-12-24', '2018-12-25', '2018-12-26', '2018-12-27', '2018-12-28', '2018-12-29', '2018-12-30', '2018-12-31', '2019-01-01', '2019-01-02', '2019-01-03', '2019-01-04', '2019-01-05', '2019-01-06', '2019-01-07', '2019-01-08', '2019-01-09', '2019-01-10', '2019-01-11', '2019-01-12', '2019-01-13', '2019-01-14', '2019-01-15', '2019-01-16', '2019-01-17', '2019-01-18', '2019-01-19', '2019-01-20', '2019-01-21', '2019-01-22', '2019-01-23', '2019-01-24', '2019-01-25', '2019-01-26', '2019-01-27', '2019-01-28', '2019-01-29', '2019-01-30']
            },
            yAxis: {
                name: '人数',
                type: 'value',
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#eee',
                        type: 'dashed'
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
            },
            series: [{
                type: 'bar',
                stack: 'date',
                name: '离校',
                data: jsonData['离校'],
            }, {
                type: 'bar',
                stack: 'date',
                name: '进校',
                data: jsonData['进校'],
            }, {
                type: 'bar',
                stack: 'date',
                name: '迟到',
                data: jsonData['迟到'],
            }, {
                type: 'bar',
                stack: 'date',
                name: '校服',
                data: jsonData['校服'],
            }]
        };
    }
    render() {
        return (
            <Card>
                <Card.Header>
                    <h4>2-7 历史考勤统计</h4>
                    <Intro content={[
                        '可切换为折线图以了解趋势'
                    ]} />
                </Card.Header>
                <Card.Body>
                    <Ec option={this.option} h='480px'/>
                </Card.Body>
            </Card>
        );
    }
}
